<template lang="html">
  <div>
    <div class="evaluate-text-box common-padding">
      <div class="evaluate-text-item">
        <slot name="header-message"></slot>
        <slot name="normal-chanese-message-speak-tip"></slot>
        <slot name="normal-foreign-message-speak-tip"></slot>
        <slot name="normal-chanese-message-tip"></slot>
        <slot name="normal-chanese-message-all"></slot>
        <slot name="normal-chanese-message-speak"></slot>
        <slot name="normal-foreign-message-all"></slot>
        <slot name="normal-foreign-message-speak"></slot>
        <slot name="read-message-day"></slot>
        <slot name="grow-message-tip"></slot>
        <slot name="grow-message"></slot>
        <slot name="high-listen-message"></slot>
        <slot name="high-read-message"></slot>
        <slot name="high-grammar-message"></slot>
        <slot name="high-word-message"></slot>
        <slot name="low-listen-message"></slot>
        <slot name="low-read-message"></slot>
        <slot name="low-text-message"></slot>
        <slot name="low-word-message"></slot>
        <slot name="message-sum-end"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {}
    },
    components: {}
  }
</script>

<style scoped>
  .common-padding {
    padding: 0 .2rem;
    box-sizing: border-box;
  }

  .evaluate-text-box {
    margin-top: .4rem;
    color: #666;
    width: 100%;
  }

  .evaluate-text-item {
    text-indent: .4rem;
    color: #666;
    padding: .1rem .4rem;
    font-weight: 500;
    font-size: .2rem;
    border-radius: .2rem;
    background-color: #fffbf7;
    box-shadow: 0px 3px 5px 0px #eee;
    box-sizing: border-box;
  }

</style>
